<template>
  <div>
    <div>
      <el-button
        circle
        icon="el-icon-search"
        style="margin-left: 3%"
        @click="search"
      />
      <el-dialog
        append-to-body
        title="用户指南"
        :visible.sync="dialogVisible"
        width="70%"
      >
        <div style="width: 80%; margin-left: 10%">
          <el-input
            v-model="searchValue"
            class="input-with-select"
            placeholder="请输入搜索内容"
            @input="searchChange"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
        </div>
        <div
          v-if="boxList.length != 0"
          style="
            width: 80%;
            margin-left: 10%;
            margin-top: 10px;
            background: #f9f6f6;
            height: 480px;
            overflow-y: auto;
          "
        >
          <div
            v-for="(items, index) in boxList"
            :key="index"
            style="margin-left: 18px; margin-top: 10px; padding-top: 10px"
          >
            <div style="margin-left: 20px" @click="to(items.id)">
              <p style="font-size: 15px">{{ items.keyword }}</p>
              <p style="font-size: 10px">{{ items.created_at }}</p>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确 定
          </el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="errorLogs.length > 0">
      <el-badge
        :value="errorLogs.length"
        @click.native="dialogTableVisible = true"
      >
        <vab-icon icon="bug-line" />
      </el-badge>

      <el-dialog
        append-to-body
        title="Sino Cloud 异常捕获"
        :visible.sync="dialogTableVisible"
        width="70%"
      >
        <el-table border :data="errorLogs">
          <el-table-column label="报错路由">
            <template #default="{ row }">
              <a :href="row.url" target="_blank">
                <el-tag type="success">{{ row.url }}</el-tag>
              </a>
            </template>
          </el-table-column>
          <el-table-column label="错误信息">
            <template #default="{ row }">
              <el-tag type="danger">{{ row.err.message }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="错误详情" width="120">
            <template #default="{ row }">
              <el-popover placement="top-start" trigger="hover">
                {{ row.err.stack }}
                <template #reference>
                  <el-button>查看</el-button>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="380">
            <template #default="{ row }">
              <a
                v-for="(item, index) in searchList"
                :key="index"
                :href="item.url + row.err.message"
                target="_blank"
              >
                <el-button type="primary">
                  {{ item.title }}
                </el-button>
              </a>
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="danger" @click="clearAll">暂不显示</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { abbreviation, title } from '@/config'
  import { getMsgChannel } from '@/api/channel'
  import { helpDocList } from '@/api/help'

  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'VabErrorLog',
    data() {
      return {
        boxList: [],
        channel_code: [],
        messages: [],
        dialogTableVisible: false,
        title,
        abbreviation,
        searchList: [
          {
            title: '百度搜索',
            url: 'https://www.baidu.com/baidu?wd=',
          },
          {
            title: '谷歌搜索',
            url: 'https://www.google.com/search?q=',
          },
          {
            title: 'Magi搜索',
            url: 'https://magi.com/search?q=',
          },
        ],
        dialogVisible: false,
        searchValue: '',
      }
    },
    computed: {
      ...mapGetters({
        errorLogs: 'errorLog/errorLogs',
      }),
    },
    watch: {
      messages(e) {
        const obj = JSON.parse(e[0])

        Object.keys(obj).map((item) => {
          if (item == 'title') {
            this.$notify({
              title: obj.title,
              message: obj.message,
              type: obj.type,
              duration: 0,
            })
          }
        })
      },
    },
    beforeMount() {
      getMsgChannel().then((e) => {
        if (e.data.channel_code) {
          this.channel_code = e.data.channel_code
          e.data.channel_code.forEach((e) => {
            this.pubsub.subscribe({
              channel: e,
              onMessage: function (message) {
                self.unshiftMessage(message.content)
              },
              onSuccess: function () {},
              onFailed: function (error) {
                self.aaa(
                  '订阅失败，错误编码：' +
                    error.code +
                    ' 错误信息：' +
                    error.content
                )
              },
            })
          })
        }
      })
      let self = this
      //连接GoEasy
      this.goEasy.connect({
        data: {},
      })

      //接收消息
      this.channel_code.forEach((e) => {
        this.pubsub.subscribe({
          channel: e,
          onMessage: function (message) {
            self.unshiftMessage(message.content)
          },
          onSuccess: function () {},
          onFailed: function (error) {
            self.aaa(
              '订阅失败，错误编码：' +
                error.code +
                ' 错误信息：' +
                error.content
            )
          },
        })
      })
    },
    mounted() {},
    methods: {
      unshiftMessage(content) {
        this.messages.unshift(content)
      },
      aaa() {},
      ...mapActions({
        clearErrorLog: 'errorLog/clearErrorLog',
      }),
      clearAll() {
        this.dialogTableVisible = false
        this.clearErrorLog()
      },
      search() {
        this.dialogVisible = true
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      searchChange(e) {
        const data = {
          keywords: e,
        }
        helpDocList(data).then((e) => {
          this.boxList = e.data.data
        })
      },
      to(e) {
        let routeUrl = this.$router.resolve({
          path: '/helpdoc',
          query: {
            id: e,
          },
        })
        window.open(routeUrl.href, '_blank')
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-badge {
      .el-button {
        display: flex;
        align-items: center;
        justify-items: center;
        height: 28px;
      }
    }
  }
</style>
